<script setup lang="ts">
import { ref, reactive } from 'vue'

const dataList = reactive([1, 2, 3, 4, 5]);
import type { ComponentSize } from 'element-plus'

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
</script>

<template>

    <el-row :span="20" justify="space-evenly">
        <el-col v-for=" item in pageSize4" :span="20">
            <div class="content">
                sdifhsudifhusdfsdfdsfdsfsdfsdfsdfsdfdsf
            </div>
        </el-col>
        <div class="pagination-block">
            <div class="demonstration">All combined</div>
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </el-row>

</template>

<style scoped>
.content {
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
}

.el-row {

    /* margin: 50px; */
    /* border: 1px solid rgb(0, 0, 0);   */
    text-align: center;
}

.el-col {
    background-color: rgb(255, 255, 255);
    padding: 0 10px;
    border: 1px solid red;
    margin: 1px auto;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.pagination-block{
    background-color: rgb(255, 255, 255);
}

</style>